<template>
  <div class="boxView">
    <div
      class="divFlex"
      style="justify-content: space-between; margin-bottom: 10px"
    >
      <div class="divFlex">
        <div style="margin-right: 20px">吊销驾照预警 </div>
        <el-tooltip
          class="item"
          effect="dark"
          content="根据人员信息录入时【采集一般情况】页里“驾驶证是否吊销”一栏所选信息为“否”的未吊销驾驶证人员信息"
          placement="right-start"
        >
          <i class="el-icon-warning" />
        </el-tooltip>
      </div>
      <div class="divFlex">
        <div style="margin-right: 10px">未吊销驾照人数{{ num.wqdrs || 0 }}</div>
        <div class="detailTitle" @click="openModal">详情</div>
      </div>
    </div>
    <div>
      <el-progress
        :percentage="Number((num.yqdrs / num.sqdrs || 0) * 100)"
        :show-text="false"
      />
      <div class="footerView">
        已吊销驾照人数/应吊销驾照人数:{{ num.yqdrs || 0 }}/{{
          num.sqdrs || 0
        }}人
      </div>
    </div>
    <ModalView ref="modalRef" />
  </div>
</template>
<script>
import ModalView from "./modal.vue";
import { getXzrs, getStatistics } from "@/api/earlyWarning/bfyj";
export default {
  components: {
    ModalView,
  },
  data() {
    return {
      num: {},
    };
  },
  mounted() {
    this.getEchart();
  },
  methods: {
    getEchart() {
      getStatistics().then((response) => {
        if (response.data.length > 0) {
          this.num = response.data[0];
        }
      });
    },
    openModal() {
      this.$refs["modalRef"].openModal();
    },
  },
};
</script>
<style lang="scss" scoped>
.boxView {
  width: 100%;
  height: calc((100vh - 240px) / 4);
  background: #fff;
  margin-bottom: 20px;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0px 0px 6px #ccc;
}
.divFlex {
  display: flex;
  align-items: center;
}
.detailTitle {
  font-size: 14px;
  color: rgb(124, 183, 244);
  cursor: pointer;
}
.echartView {
  width: 100%;
  height: calc(((100vh - 240px) / 4) - 80px);
  box-sizing: border-box;
  padding: 0;
}
.footerView {
  text-align: right;
  font-size: 14px;
  border-top: 1px solid #ccc;
  margin-top: 20px;
  padding-top: 2px;
}
</style>
